<template>
	<div class="empbox">
		<el-row>
			<el-tabs type="border-card">
				<el-tab-pane label="所有员工">
					<el-table :data="emps.slice((currentPage-1)*pagesize,currentPage*pagesize)">
						<el-table-column prop="eid" label="id"></el-table-column>
						<el-table-column prop="ename" label="姓名"></el-table-column>
						<el-table-column prop="sex" label="性别">
							<template slot-scope="scope">
								<i v-if="scope.row.sex==0">男</i>
								<i v-else-if="scope.row.sex==1">女</i>
							</template>
						</el-table-column>
						<el-table-column prop="tel" label="电话"></el-table-column>
						<el-table-column prop="adss" label="家庭地址"></el-table-column>
						<el-table-column prop="birth" label="出生日期"></el-table-column>
						<el-table-column prop="job" label="职位"></el-table-column>
						<el-table-column prop="dname" label="部门" >
						</el-table-column>
						<el-table-column prop="salary" label="工资"></el-table-column>
						<el-table-column prop="induct_date" label="入职日期"></el-table-column>
						<el-table-column prop="state" label="状态">
							<template slot-scope="scope">
								<i v-if="scope.row.state==0">在职</i>
								<i v-else-if="scope.row.state==1">离职</i>
							</template>
						</el-table-column>
					</el-table><br/>
					 <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
							background
                            :current-page="currentPage"
                            :page-sizes="[6, 8, 10]" 
                            :page-size="pagesize"         
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="emps.length">  
                    </el-pagination>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	export default {
		name:'queryallemp',
		data() {
			return {
				emps:[],
				currentPage:1, //初始页
                pagesize:6,    //    每页的数据
			}
		},
		created(){
			this.$axios.post("findemps").then(v=>{
				console.log(v)
				if(v.data){
					this.emps=v.data;
				}else{
					alert("出错了！！");
				}
			}).catch(ex=>{
				alert("出错了！"+ex);
			})
		},
		methods:{
			handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage){
					this.currentPage = currentPage;
					console.log(this.currentPage)  //点击第几页
			},
			
		}
	}
</script>

<style>

</style>
